<template>
<div class="container-wrapper">
    <el-container>
        <el-main>
            <el-row>
                <el-col :xs="24" :sm="24" :lg="24" class="primary">平台代码库查询</el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
            </el-row>
    
            <el-tabs type="border-card" v-model="tab_active" class="m-b">
                <el-tab-pane :label="'Manifest详情查询'" :name="'Manifest详情查询'">
                    <el-card class="box-card m-b" body-style="padding-top: 10px; padding-bottom: 10px;">
                        <el-row>
                            <div class="block">
                                <label class="col-form-label mr-1" >{{'库名:'}}</label>
                                <el-select
                                    v-model="project"
                                    @change="projectChanged"
                                    style="width: 150px;"
                                    size="mini"
                                    class="mr-4">
                                    <el-option label="所有" value="all"></el-option>
                                    <el-option
                                        v-for="item in projectList"
                                        :key="item.project"
                                        :label="item.project"
                                        :value="item.project">
                                    </el-option>
                                </el-select>
                                <label class="col-form-label mr-1">{{'分支:'}}</label>
                                <el-select
                                    v-model="filters.branch"
                                    style="width: 200px;"
                                    @change="branchChanged"
                                    size="mini"
                                    class="mr-4">
                                    <el-option
                                        v-for="item in branchList"
                                        :key="item.branch"
                                        :label="item.branch"
                                        :value="item.branch">
                                    </el-option>
                                </el-select>
                                <label class="col-form-label mr-1">{{'Manifest:'}}</label>
                                <el-select
                                    v-model="filters.xml"
                                    style="width: 200px;"
                                    size="mini"
                                    class="mr-3">
                                    <el-option
                                        v-for="item in xmlListComputed"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                    </el-option>
                                </el-select>
                                <!-- <el-checkbox v-model="checked" class="">显示子目录</el-checkbox> -->
                            </div>
                        </el-row>                        
                    </el-card>
                    <tablemanifest :filters="filters"></tablemanifest>
                </el-tab-pane>
                <el-tab-pane :label="'Git库查询'" :name="'Git库查询'">
                    <el-card class="box-card m-b" body-style="padding-top: 10px; padding-bottom: 10px;">
                        <el-row>
                           <el-autocomplete placeholder="请输入内容" :fetch-suggestions="querySearchAsync" :trigger-on-focus="false" v-model="gitName" style="width:400px" class="mr-4" size="small">
                            <template slot="prepend">Git Name:</template>
                            </el-autocomplete>                           
                            <el-button
                                icon="el-icon-search" 
                                size="small"
                                type="primary"
                                @click="search"
                                class=""
                                style="margin-left: 30px;margin-right: 5px;">
                                搜索
                            </el-button> 
                        </el-row>                        
                    </el-card>
                    <el-card shadow="never">
                        <div slot="header" class="clearfix">      
                            <span>git责任人(owner): {{ git_owner }}</span>
                        </div>
                        <el-row>
                            <el-table
                                :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)"
                                border
                                style="width: 100%">
                                <el-table-column align="center" label="BranchOwner" fixed>
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.branchowner">{{ scope.row.branchowner }}</div>
                                        <div v-else>-</div>
                                    </template>
                                </el-table-column> 

                                <el-table-column align="center" label="分支名">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.newbranchnamae">{{ scope.row.newbranchnamae }}</div>
                                        <div v-else>-</div>
                                    </template>
                                </el-table-column> 
                                
                                <el-table-column align="center" label="生命周期">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.cycle">{{ scope.row.cycle }}</div>
                                        <div v-else>-</div>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" label="类型">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.branchtype">{{ scope.row.branchtype }}</div>
                                        <div v-else>-</div>
                                    </template>
                                </el-table-column> 

                                <el-table-column align="center" label="manifest">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.manifest">{{ scope.row.manifest }}</div>
                                        <div v-else>-</div>
                                    </template>
                                </el-table-column> 

                                <el-table-column align="center" label="项目">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.project">{{ scope.row.project }}</div>
                                        <div v-else>-</div>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" label="Revision">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.revision">{{ scope.row.revision }}</div>
                                        <div v-else>-</div>
                                    </template>
                                </el-table-column> 

                                <el-table-column align="center" label="StartPoint">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.startpoint">{{ scope.row.startpoint }}</div>
                                        <div v-else>-</div>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" label="Component">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.component">{{ scope.row.component }}</div>
                                        <div v-else>-</div>
                                    </template>
                                </el-table-column>

                                <el-table-column align="center" label="Feature">
                                    <template slot-scope="scope">
                                        <div v-if="scope.row.feature">{{ scope.row.feature }}</div>
                                        <div v-else>-</div>
                                    </template>
                                </el-table-column>                   
                            </el-table>
                            <el-pagination
                                style="padding-top: 10px;"
                                v-show="total > 10"
                                background
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                layout="total, prev, pager, next, jumper"
                                :total="total">
                            </el-pagination>
                        </el-row>        
                    </el-card>
                </el-tab-pane>
                <el-tab-pane :label="'仓库所在项目查询'" :name="'仓库所在项目查询'">
                    <manifestreversesearch></manifestreversesearch>
                </el-tab-pane>
                <el-tab-pane :label="'Manifest信息比对'" :name="'Manifest信息比对'">
                    <FileDiff></FileDiff>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</div>   
</template>
<script>
import FileDiff from './FileDiff';
import TableManifest from '@/components/qa/ManifestComponent/TableManifest.vue';
import ManifestReverseSearch from './ManifestReverseSearch.vue';
import { getHeader } from '@/app.config'
import http from '@/views/sys/axios'

export default {
    name: 'GerritGitQuery',
    components: {
        FileDiff,
        tablemanifest: TableManifest,
        manifestreversesearch: ManifestReverseSearch,
    },
    data () {
        return {
            timeout: null,
            timeout2: null,
            gitNameList: [],
            tab_list: ['Manifest详情查询', '仓库所在项目查询', 'Manifest信息比对'],
            tab_active: 'Manifest详情查询',
            filters: {
                branch: '',
                xml: '',
            },
            gitName: '',
            checked: false,
            project: 'all',
            git_owner: '',
            currentPage: 1,
            total: 0,
            pageSize: 10,
            tableData: [],
            projectList: [],
            branchList: [],
            xmlList: [],
            searching: false,
        }
    },
    methods: {
        querySearchAsync(queryString, cb) {
            let gitNameList = this.gitNameList;
            let results = queryString ? gitNameList.filter(this.createStateFilter(queryString)) : gitNameList;

            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
            cb(results);
            }, 1000 * Math.random());
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        getGitNameList() {
            const res = http.get(`/api/manifest/match/git?name=${this.gitName}`)
            return res       
        },
        async getGitNameListResult() {
            let { code, git_name } = await this.getGitNameList()
            
            if(code === 200) {
                git_name.map((item, index) => {
                    git_name[index] = { value: item }
                })
                this.gitNameList = git_name
            }
        },
        getGit() {
            http.get(`/api/manifest/git/get_branch?gitName=${this.gitName}`)
            .then(res => {
                // airliner/qnx_vendor/device/dizzy
                if(res.code == 200) {
                    this.git_owner = res.git_owner
                    this.tableData = res.table_data
                    this.total = this.tableData.length
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        search() {
            this.getGit()
        },
        handleCurrentChange(val) {
            this.currentPage = val
        },
        projectChanged: function() {
            this.filters.branch = '';
            this.filters.xml = '';
            this.getBranch(this.project);
        },
        branchChanged: function() {
            this.filters.xml = '';
            this.getXML(this.project, this.filters.branch);
        },
        getProject: function() {
            var source = process.env.VUE_APP_KANBAN_HOST + '/api/manifest/project'
            this.$axios.get(source, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        if (response.data.code == 200) {
                            this.projectList = response.data.project_name;
                        }
                    }
                })
                .catch((err) => {console.log(err);});
        },
        getBranch: function(project) {
            this.$axios.get(process.env.VUE_APP_KANBAN_HOST + '/api/manifest/branch?project='+project, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        if (response.data.code == 200) {
                            this.branchList = response.data.branch_info;
                        } 
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        getXML: function(project, branch) {
            this.$axios.get(process.env.VUE_APP_KANBAN_HOST + '/api/manifest/xml?project='+project+'&branch='+branch, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        if (response.data.code == 200) {
                            this.xmlList = response.data.xml_info;
                        }
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        },
        // popModal() {
        //     this.showModal = true; //切换showModal 的值来切换弹出与收起
        //     var t;
        //     clearTimeout(t)
        //     let _this = this;
        //     t = setTimeout(function (){
        //         _this.showModal = false;
        //     }, 20000);
        // },
    },
    computed: {
        xmlListComputed: function() {
            if (this.checked) {
                return this.xmlList;
            } else {
                return this.xmlList.filter(function(value) {
                    if (value.indexOf('/') === -1) {
                        return value;
                    }
                })
            }
        }
    },
    mounted: function() {
        this.getProject();
        this.getBranch('all');   
    },
    watch: {
        gitName(newVal) {
            if(newVal) {
                clearTimeout(this.timeout2)
                this.timeout2 = setTimeout(() => {
                    this.getGitNameListResult()
                }, 500)
                
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    @import '../../assets/common/common.scss';
    /deep/ .el-table th.gutter{
        display: table-cell!important;
    }
    .col-form-label {
        padding-top: calc(.375rem + 1px);
        padding-bottom: calc(.375rem + 1px);
        margin-bottom: 0;
        font-size: inherit;
        line-height: 1.5;
    }
    .mr-1{
        margin-right: .25rem;
    }
    .container-wrapper{
        padding: 32px;
        background-color: rgb(240, 242, 245);
        position: relative;    
        .border{
            box-sizing: content-box;
            height: 0;
            overflow: visible;
            margin-top: 1rem;
            margin-bottom: 1rem;
            border: 0;
            border-top: 1px solid rgba(0,0,0,.1);
        }
        .primary{
            color: #409EFF;
            font-size: 30px;
            margin-top: 20px;
            margin-bottom: 10px;
            font-weight: 400;
        }
        .m-b{            
            .mr-2, .mx-2 {
                margin-right: .5rem!important;
            }
            label {
                display: inline-block;
                margin-bottom: .5rem;
            }
            .mr-1, .mx-1 {
                margin-right: .25rem!important;
            }
            .col-form-label {
                padding-top: calc(.375rem + 1px);
                padding-bottom: calc(.375rem + 1px);
                margin-bottom: 0;
                font-size: inherit;
                line-height: 1.5;
            }
            .mr-4, .mx-4 {
                margin-right: 1.5rem!important;
            }
            .mr-1, .mx-1 {
                margin-right: .25rem!important;
            }         
        }
        label {
            display: inline-block;
            margin-bottom: .5rem;
        }       
        .label {
            background-color: #d1dade;
            color: #5e5e5e;
            font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-weight: 600;
            padding: 3px 8px;
            text-shadow: none;
            border-radius: 0.25em;
            line-height: 1;
            white-space: nowrap;
        }
   }     
</style>
